<template>
  <!-- //v-model让input接受对象变量 -->
   <h3>子组件3：使用计算属性完成矩形的面积随长宽数据响应式呈现   </h3>
    <div class="person">
    长方形的长: <input type="number" v-model="firstname"><br>
    长方形的宽: <input type="number" v-model="secondname"><br>
    长方形的面积为: <span>{{ fullName }}</span>
     <hr>
     <button @click="changefirst">长度加一</button>
     <button @click="changeSecond">宽度加一</button>
    </div>
</template>
<script setup name="New" lang="ts">
import { reactive, toRef,ref, computed } from 'vue';
let firstname = ref(0)
let secondname = ref(0)

let fullName = computed(()=>
 firstname.value * secondname.value
) 
 
 function changefirst(){
  firstname.value +=1
 }

 function changeSecond(){
  secondname.value +=1
 }
</script>
<style>

</style>
